<template>
    <div id="good-detail">
        <van-swipe :autoplay="5000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image" @click="imagePreview(image)">
                <img :src="image" alt="img" />
            </van-swipe-item>
        </van-swipe>
        <div class="good-detail">
            <div class="good-detail-price"><span>￥</span>{{ detailInfo.price }}</div>
            <h2>{{ detailInfo.title }}</h2>
            <p>{{ detailInfo.description }} </p>
        </div>
        <div class="fixed-bottom">
            <div class="btn-1 btn-1-main" @click="showDialog()">立即购买</div>
        </div>
        <!-- 弹出 -->
        <van-dialog v-model:show="show" title="确认购买" show-cancel-button @confirm="toSubmit">
            <van-field v-model="payInfo.rolename" center placeholder="请输入接受装备的角色名" />
            <van-field v-model="payInfo.pay_password" center type="password" placeholder="请输入支付密码" />
        </van-dialog>
    </div>
</template>


<script>
import { showImagePreview } from 'vant';
export default {
    name: 'Good',
    data() {
        return {
            show:false,
            images: [],
            detailInfo:{
                price:0,
                title:'',
                description:'',
            },
            payInfo:{
                pay_password:'',
                rolename:'',
            },
        }
    },
    created() {
        let detail_id = this.$route.params.id;
        this.$api.good.detail({detail_id:detail_id}).then(res => {
            this.detailInfo = res.result;
            this.images = res.result.album;
        }).finally(e =>{});
    },
    methods: {
        showDialog(){
            this.show = true;
        },
        toSubmit() {
            let params = this.payInfo;
            params.good_id = this.detailInfo.id;
            this.$api.order.create(params).then(res => {
                this.$router.push('/order/list');
            }).finally(e =>{});
        },
        // 预览
        imagePreview(index) {
            let images = this.images;
            showImagePreview({
                images,
                startPosition: 1,
            });
        },
    }
}
</script>
